<template>
  <div class="funnel-deploy">
    <template v-if="!resultParam.length">
      <div class="funnel-message">
        <icon-svg name="iconFacTmpl"></icon-svg>
        <p>请至少选择两个步骤来组成漏斗查询</p>
      </div>
    </template>
    <template v-else>
      <el-form :model="editForm" ref="editForm" label-width="70px">
        <div class="funnel-header">
          <icon-svg name="iconMonitor"></icon-svg>
          <el-form-item
            prop="funnelAnalysisName"
            label-width="0"
            :rules="{
              required: true,
              message: '漏斗分析名称不能为空',
              trigger: 'blur'
            }"
          >
            <el-input v-model="editForm.funnelAnalysisName" placeholder="请输入漏斗分析名称"></el-input>
          </el-form-item>
          <div class="header-handler">
            <span class="btn" @click="handleSave">
              <icon-svg name="iconSave"></icon-svg>
              保存
            </span>
          </div>
        </div>
        <div class="funnel-charts tag-scrollbar">
          <div class="form-box">
            <el-row>
              <el-col :span="12">
                <el-form-item label="分析备注" prop="iconDescription">
                  <el-input
                    type="textarea"
                    placeholder="请输入分析备注"
                    v-model="editForm.iconDescription"
                    :rows="7"
                    resize="none"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="时间设置" prop="chartTime">
                  <el-date-picker
                    v-model="editForm.chartTime"
                    type="datetimerange"
                    range-separator="至"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  ></el-date-picker>
                </el-form-item> -->
              </el-col>
            </el-row>
          </div>
          <funnel-chart ref="analyseFunnel" :funnelList="resultParam"></funnel-chart>
        </div>
      </el-form>
    </template>
  </div>
</template>

<script>
import funnelChart from './funnel-chart'
export default {
  components: {
    funnelChart
  },
  props: {
    resultParam: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editForm: {
        funnelAnalysisName: '',
        iconDescription: '',
        chartTime: ''
      }
    }
  },
  methods: {
    init(params) {
      this.editForm.funnelAnalysisName = params.funnelAnalysisName
      this.editForm.iconDescription = params.iconDescription
      this.editForm.chartTime = params.chartTime
    },
    handleSave() {
      this.$refs.editForm.validate(valid => {
        if (valid) this.$emit('save', this.editForm)
      })
    }
  }
}
</script>

<style lang="scss">
.funnel-deploy {
  height: 100%;
  padding-left: 20px;
  overflow-y: auto;
  .funnel-message {
    font-size: 16px;
    color: #6a86cc;
    text-align: center;
    position: absolute;
    top: 40%;
    left: calc(50% + 160px);
    transform: translate(-50%, -50%);
    svg {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }
  }
  .el-form {
    height: 100%;
  }
  .funnel-header {
    svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin-top: -5px;
      color: #6a86cc;
    }
    .el-form-item {
      display: inline-block;
      width: 50%;
      height: 40px;
      margin-bottom: 10px;
      .el-input__inner {
        font-size: 20px;
        font-weight: bold;
        border: 0;
        color: #333;
      }
    }
    .el-form-item__error {
      top: 30px;
      left: 15px;
    }
    .header-handler {
      float: right;
      .btn {
        font-size: 15px;
        margin-right: 10px;
        line-height: 40px;
        color: #455fbc;
        cursor: pointer;
        svg {
          color: #455fbc;
        }
      }
    }
  }
  .form-box {
    padding: 20px 20px 0 20px;
    .el-form-item {
      margin-bottom: 5px;
      padding-right: 15px;
    }
    .el-date-editor {
      width: 100%;
    }
  }
  .funnel-charts {
    height: calc(100% - 50px);
    background-color: #f5f7fa;
    border-top: 2px solid #f5f7fa;
    border-bottom: 2px solid #fff;
    overflow-y: auto;
  }
}
</style>
